<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>支付账单</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/comments.css" media="all">
    <link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/goods.css">
    <style>
		body{
			font-size: 14px;
		}
        .layui-form-label{
            width: 130px;
        }
        .layui-input-block{
            margin-left: 160px;
        }
        .payRecordFilesDiv,.payRecordFilesDiv1,#selectTable,.table_total{
            /* display: none; */
        }
        .table_total{
            text-align: right;
        }
        .imgdiv{
            /* width: 200px;
            height: 300px; */
            overflow: hidden;
            background: #fff;
        }
        .imgdiv img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
		/* 支付凭证 */
		.addFile{
		    width: 100px;
		    height: 30px;
		    border-radius: 4px;
		    border: 1px dashed #e6e6e6;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    cursor: pointer;
		    color: #666;
		    font-size: 12px;
			margin-top:20px;
		}
		.addFile:hover {
		    border: 1px dashed #f58843;
		    background: linear-gradient(316deg,#f58843 0%,#f56643 100%);;
		    color: #fff;
		}
		.addFile:hover i {
		    color: #fff;
		}
		.addFile i {
		    font-size: 14px;
		    color: #f5dab0;
		    margin-right: 5px;
		}
		.fileList li{
			color:#03A9F4;
		}
		.fileUpLoadName{
			cursor: pointer;
		}
		.fileUpLoadView{
		    cursor: pointer;
		    margin-left:10px;
		    color:#9F9F9F;
		}
		.fileUpLoadView:hover{
			color:#f56643;
		}
        
       /* .addFile{
            width: 200px;
            height: 300px;
            border-radius: 4px;
            border: 1px dashed #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #666;
            font-size: 12px;
        }
        .addFile:hover {
            color: #f58843;
        }
        .addFile:hover i {
            color: #f58843;
        }
        .addFile i {
            font-size: 14px;
            color: #f5dab0;
            margin-right: 5px;
        }
        .addFileImg{
            width: 200px;
            height: 300px;
            border-radius: 4px;
            border: 1px dashed #e6e6e6;
            cursor: pointer;
            overflow: hidden;
            display: none;
        }
        .addFileImg img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        } */
    </style>
</head>
<body>
    <div class="maincontainer">
		<blockquote class="layui-elem-quote">
		    支付账单 - 待结账
		    <button type="button" class="layui-btn layui-btn-sm" style="float: right;margin-top: -4px;" onclick="window.history.back();">返回</button>
		</blockquote>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">账单编号：</label>
                <div class="layui-form-mid layui-word-aux billNo"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">餐饮总公司：</label>
                <div class="layui-form-mid layui-word-aux foodManagerName"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单内容</label>
                <div class="layui-input-block table">
                    <table class="layui-hide" id="selectTable" lay-filter="selectTable"></table>
                    <div class="table_total">合计：</div>
                </div>
            </div>
			<div class="layui-form-item payRecordFilesDiv">
			 	<label class="layui-form-label">支付凭证：</label>
			 	<div class="layui-input-inline">
			 		<div class="imgList">
			 			<ul class="mainpicture">
			 				<li class="nullimg detailsImg">
			 					<div> 
			 						<i class="fa fa-cloud-upload"></i>
			 						<p>上传图片</p>
			 					</div>
			 				</li>
			 				<li class="showDImg1" style="display: none">
			
			 				</li>
			 			</ul>
			 			<input type="file" accept="image/*" id="bannerUp" multiple style="display: none;" name="">
			 			<label class="addImg" for="bannerUp">
			 				<i class="fa fa-cloud-upload"></i>上传
			 			</label>
			 		</div>
			 	</div>
			</div>
			<!-- <div class="layui-form-item">
			    <label class="layui-form-label">支付凭证：</label>
			    <div class="layui-form-mid layui-word-aux">注：只可上传PDF或图片</div>
			</div>
			<div class="layui-form-item">
			    <div class="layui-input-block">
			        <div>
						<ul class="fileList">
							
						</ul>
			        </div>
			        <div>
			            <input type="file" accept="application/pdf,image/*" id="fileUpLoad" multiple style="display: none;" name="">
			            <label class="addFile" for="fileUpLoad">
			                <i class="fa fa-cloud-upload"></i>上传
			            </label>
			        </div>
			    </div>
			</div> -->
            <!-- <div class="layui-form-item payRecordFilesDiv1" >
                <label class="layui-form-label">支付凭证：</label>
                <div class="layui-input-inline">
                    <input type="file" accept="image/*" id="fileUpLoad" multiple style="display: none;" name="">
                    <label class="addFile" for="fileUpLoad">
                        <i class="fa fa-cloud-upload"></i>上传
                    </label>
                    <label class="addFileImg" for="fileUpLoad">
                        <img src="" alt="">
                    </label>
                </div>
            </div> -->
            <div class="layui-form-item btnDiv">
				<div class="layui-input-block">
					<button type="button" class="layui-btn payBtn">支付账单</button>
					<button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">取消</button>
				</div>
            </div>
        </form>
    </div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container toolbarDemo">
        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="export" type="button">导出订单</button>
    </div>
</script>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>

    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'form', 'laydate', 'table'], function() {
        var http = layui.http,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table;

        var id = http.getPid('id')
        var imgFile
        
        init()
        function init(){
            http.get('food/manager/order/bill/findById/foodManager',{
                id: id
            },function(res){
                if(res.code == 200){
                    var data = res.data
					
					$('.billNo').html(data.billNo)
                    $('.foodManagerName').html(data.foodManagerName)
					var selectTable = http.table1({
					    elem: '#selectTable',
					    id: 'selectTable',
					    toolbar: '#toolbarDemo',
					    cols: [[
					        {field:'shopOrderNo', title: '订单编号', align : 'center',
					            templet: function(d){
					                var html = ''
					                html += '<a class="buttoncolor" href="orderInfo.html?id='+d.shopOrderNo+'">'+d.shopOrderNo+'</a>'
					                return html
					            }
					        },
					        {field:'supplierName', title: '供应商名称', align : 'center'},
					        {field:'canteenName', title: '食堂名称', align : 'center',totalRow: true},
					        {field:'orderTotalMoney', title: '订单金额', align : 'center'},
                            {field:'goodCount', title: '商品数量', align : 'center'},
					        {field:'createTime', title: '下单时间', align : 'center'}
					    ]],
					    data: data.billInfoSingleOrderListVoList
					})
					
					var sum = 0
					for(var p=0;p<data.billInfoSingleOrderListVoList.length;p++){
					    sum += data.billInfoSingleOrderListVoList[p].orderTotalMoney
					}
					$('.table_total').html('合计：<span style="color: #fbaf7e">￥'+sum.toFixed(2)+'</span>')
                    
                    // table的toolbar
                    table.on('toolbar(selectTable)', function (obj) {
                        if(obj.event=='export'){ // 导出
                            var param = {
                                id: id,
                                authentication: localStorage.getItem('xi-head-authentication')
                            }
                            if (param) {  
                                let paramsArray = [];  
                                //encodeURIComponent  
                                Object.keys(param).forEach(key => paramsArray.push(key + '=' + param[key]))  
                                window.open(TUrl+"food/manager/order/bill/exportInfo/foodManager?"+paramsArray.join('&'))
                            }
                        }
                    })
                }else{
                    layer.msg(res.msg)
                }
            })
			
			// 支付凭证
			$('#bannerUp').on('change', function () {
				formData = new FormData();
				var files = this.files;
				if(!files||files.length==0){
					return
				}
				for(var i=0;i<files.length;i++){
					formData.append('files', files[i]);
				}
				formData.append('fileType', 'img');
				formData.append('isFileName', false);
				
				$('.showDImg1').show().siblings('li').hide();
				onBannerUp(formData,files);
			});
			function onBannerUp(formData,files){
				http.upLoad('system/file/upload/batch',formData,function(res){
					$('#bannerUp').val('')
				    if(res.code == 200){
						var dataList = res.data;
						$('.detailsImg').hide()
						for(var i=0;i<dataList.length;i++){
							var imgId = http.getUUID();
							var html = '<div id="div'+imgId+'" class="imgdiv">'+
							    '<img onurl="'+dataList[i]+'" src="'+(TUrl+dataList[i])+'" id="proimg'+imgId+'">'+
							    '<ul class="imgul" id="span'+imgId+'">'+
							        '<li onclick="deleteimg(\'div'+imgId+'\')">移除</li>'+
							    '</ul>'+
							'</div>';
							$('.showDImg1').append(html);
							$('#div'+imgId+'').attr('onmouseover','showOperation(\'span'+imgId+'\')');
							$('#div'+imgId+'').attr('onmouseout','hideOperation(\'span'+imgId+'\')');
						}
						layer.msg('图片上传成功！', {
						    time: 500
						});
				    }else{
				        layer.msg(res.msg)
				    }
				})
			}
            
            // 支付凭证
			// $('#fileUpLoad').on('change', function () {
			// 	var newFlieArr = [];
			// 	var formData = new FormData();			        
			//     var files = this.files;
			// 	if(!files||files.length==0){
			// 		return
			// 	}
			// 	var ifGo = true;
			// 	for(var i=0;i<files.length;i++){
			// 		var newFlie = {};
			// 		var file = files[i];
			// 		newFlie.filename = file.name;        //文件名
			// 		fileext = http.getLaName(file.name);
			// 		if(!http.isAssetType(fileext)){
			// 			ifGo = false
			// 			layer.msg('只可上传PDF或图片')
			// 			break
			// 		}
			// 		newFlieArr.push(newFlie);
			// 		formData.append("files", files[i]);
			// 	}
			// 	formData.append("isfileName", false);
			// 	formData.append("fileType", "file");
			// 	if(ifGo){
			// 		http.upLoad('system/file/upload/batch',formData,function(res){
			// 		    if(res.code == 200){
			// 				var dataList = res.data;
			// 				for(var i=0;i<dataList.length;i++){
			// 					newFlieArr[i].file = dataList[i];
			// 					var html = '<li><span data-url="'+newFlieArr[i].file+'" class="fileUpLoadName">'+newFlieArr[i].filename+'</span><span class="fileUpLoadView">删除</span></li>';
			// 					$('.fileList').append(html);
			// 				}
			// 		    }else{
			// 		        layer.msg(res.msg)
			// 		    }
			// 		})  
			// 	}else{
			// 	}
			// })
			
			// // 预览
			// $(document).on('click','.fileUpLoadName',function(e){
			// 	var url = e.target.dataset.url
			//     window.open(TUrl+url)
			// })
			// // 删除
			// $(document).on('click','.fileUpLoadView',function(e){
			// 	$(this).parent().remove()
			// })
            // $('#fileUpLoad').on('change', function () {
            //     var file = this.files
            //     var formData = new FormData();
            //     formData.append('file', file[0]);
            //     formData.append('fileType', 'img');
            //     formData.append('isFileName', false);
            //     http.upLoad('system/file/upload',formData,function(res){
            //         if(res.code == 200){
            //             imgFile = res.data
            //             $('.addFile').hide()
            //             $('.addFileImg').css('display','block')
            //             $('.addFileImg>img').attr('src',TUrl+imgFile)
            //         }else{
            //             layer.msg(res.msg)
            //         }
            //     })
            // })

            // 支付账单
            $(document).on('click','.payBtn',function(){
                http.myOpen({
                    title:'提示',
                    content:'<p style="text-align:center;margin-top:20px">是否确认支付账单！</p>',
                    area:['300px','150px'],
                    btn:['确定','取消'],
                    btn1:function(index, layero){
                        
						// 凭证
						var smallPic = [];
						$(".showDImg1").find("img").each(function(){
							var src =  $(this).attr("onurl");
							smallPic.push(src);
						});
						
						if(smallPic.length==0){
						    layer.msg('请上传支付凭证')
						    return
						}
						
                        http.post('food/manager/order/bill/pay',{
                            billNo: id,
                            payRecordFiles: JSON.stringify(smallPic)
                        },function(res){
                            if(res.code == 200){
                                layer.msg('操作成功')
                                layer.close(index)
                                setTimeout(function(){
                                    window.history.back()
                                },500)
                            }else{
                                layer.msg(res.msg)
                            }
                        })
                        
                    }
                });
            })
        }
    })
	//显示图片操作
	function showOperation(imgId){
		$('#'+imgId+'').show();
	}
	//隐藏图片操作
	function hideOperation(imgId){
		$('#'+imgId+'').hide();
	}
	//图片移除
	function deleteimg(imgId){
		$('#'+imgId+'').remove();		
	}
</script>
</body>
</html>